import { Button, Form, Input, Upload, message } from "antd";
import React from "react";
import "./emailSend.css";
import MyEditor from "./edit";
const layout = {
  labelCol: {
    span: 8,
  },
  wrapperCol: {
    span: 16,
  },
};
/* eslint-disable no-template-curly-in-string */

const validateMessages = {
  required: "${label} is required!",
  types: {
    email: "${label} is not a valid email!",
    number: "${label} is not a valid number!",
  },
  number: {
    range: "${label} must be between ${min} and ${max}",
  },
};
/* eslint-enable no-template-curly-in-string */
// 文件上传
const props = {
  name: "file",
  action: "https://www.mocky.io/v2/5cc8019d300000980a055e76",
  headers: {
    authorization: "authorization-text",
  },

  onChange(info) {
    if (info.file.status !== "uploading") {
      console.log(info.file, info.fileList);
    }

    if (info.file.status === "done") {
      message.success(`${info.file.name} 文件上传成功`);
    } else if (info.file.status === "error") {
      message.error(`${info.file.name} 文件上传失败.`);
    }
  },
};
const Send = () => {
  const onFinish = (values) => {
    console.log(values);
  };

  return (
    <Form
      className="emailForm"
      {...layout}
      name="nest-messages"
      onFinish={onFinish}
      validateMessages={validateMessages}
    >
      <Form.Item
        name={["user", "name"]}
        label="收件邮箱 "
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input />
      </Form.Item>
      <Form.Item
        name={["user", "email"]}
        label="邮件标题 "
        rules={[
          {
            type: "email",
            required: true,
          },
        ]}
      >
        <Input />
      </Form.Item>

      {/* <Form.Item
        name={["user", "introduction"]}
        label="邮件内容 "
        rules={[
          {
            required: true,
          },
        ]}
      >
        <Input.TextArea />
      </Form.Item> */}
      <Form.Item
        rules={[
          {
            required: true,
          },
        ]}
        name="outline"
        label="邮件内容"
        wrapperCol={{ span: 12 }}
      >
        <MyEditor />
      </Form.Item>
      <Form.Item label="附件" wrapperCol={{ span: 10 }}>
        <Upload {...props}>
          <Button className="uploadBtn">选择文件</Button>
        </Upload>
      </Form.Item>
      <Form.Item wrapperCol={{ ...layout.wrapperCol, offset: 8 }}>
        <Button type="primary" htmlType="submit">
          立即发送
        </Button>
        <Button type="primary" htmlType="submit" className="lastBtn">
          关闭
        </Button>
      </Form.Item>
    </Form>
  );
};

export default Send;
